<template>
    <el-container class="personal-center-container">
      <el-header class="header">
        <div class="header-content">
          <h2>个人中心</h2>
        </div>
      </el-header>
      <el-main class="main-content">
        <el-row :gutter="20">
          <el-col :span="12" class="user-info-col">
            <el-card class="user-info-card">
              <h3>用户信息</h3>
              <p>用户名：张三哥</p>
              <p>会员等级：VIP3</p>
              <p>ID：209901071124</p>
              <p>联系方式：13****5678</p>
            </el-card>
          </el-col>
          <el-col :span="12" class="login-info-col">
            <el-card class="login-info-card">
              <h3>登录信息</h3>
              <p>当前登录设备：PC端</p>
              <p>登录地点：中国广东深圳</p>
              <p>最后登录时间：2099-02-23 10:09:50</p>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="order-status-row">
          <el-col :span="24">
            <el-card class="order-status-card">
              <h3>订单状态</h3>
              <el-tag type="danger">待付款 (1)</el-tag>
              <el-tag type="warning">未发货 (2)</el-tag>
              <el-tag type="success">待收货 (0)</el-tag>
              <el-tag type="info">待评价 (3)</el-tag>
              <el-tag type="primary">已完成 (5)</el-tag>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="order-list-row">
          <el-col :span="24">
            <el-card class="order-list-card">
              <h3>我的订单</h3>
              <el-table :data="orders" style="width: 100%">
                <el-table-column prop="orderNumber" label="订单号" width="150"></el-table-column>
                <el-table-column label="订单详情">
                  <template #default="scope">
                    <div class="order-detail">
                      <p>订单金额：￥{{ scope.row.amount }}</p>
                      <p>下单时间：{{ scope.row.createTime }}</p>
                      <p>花店已接单：本地花店【龙华小赋花店0755-81234567】已接单</p>
                      <el-button type="text" size="small" @click="viewOrderDetails(scope.row.orderNumber)">查看详情</el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button type="text" size="small" @click="cancelOrder(scope.row.orderNumber)">取消订单</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'PersonalCenter',
    setup() {
      const orders = ref([
        { orderNumber: '20990223001', amount: 199.99, createTime: '2099-02-23 10:53:57' },
        // 更多订单数据...
      ]);
  
      const viewOrderDetails = (orderNumber) => {
        console.log('查看订单详情', orderNumber);
        // 实现查看订单详情的逻辑，如跳转到详情页面
      };
  
      const cancelOrder = (orderNumber) => {
        console.log('取消订单', orderNumber);
        // 实现取消订单的逻辑
      };
  
      return {
        orders,
        viewOrderDetails,
        cancelOrder,
      };
    },
  };
  </script>
  
  <style scoped>
  .personal-center-container {
    padding: 20px;
  }
  
  .header {
    background-color: #f5f7fa;
    padding: 10px 0;
    text-align: center;
  }
  
  .header-content h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
  }
  
  .main-content {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  
  .user-info-col, .login-info-col {
    background-color: #fafafa;
    padding: 20px;
    border-radius: 8px;
  }
  
  .user-info-card, .login-info-card {
    margin: 0;
  }
  
  .order-status-row, .order-list-row {
    margin-top: 20px;
  }
  
  .order-status-card, .order-list-card {
    margin: 0;
    padding: 20px;
    background-color: #fafafa;
    border-radius: 8px;
  }
  
  .order-detail {
    margin-bottom: 10px;
  }
  
  .order-detail p {
    margin: 5px 0;
    color: #666;
  }
  
  .el-button {
    margin-right: 10px;
  }
  
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  .el-table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .el-table th, .el-table td {
    text-align: left;
    padding: 12px 0;
  }
  
  .el-table th {
    background-color: #f5f7fa;
    color: #333;
  }
  </style>